<nz-card [nzSize]="'small'" class="mt-10">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm" (ngSubmit)="submitSearch()">
        <nz-form-item>
            <nz-form-control>
                <nz-input-group nzPrefixIcon="search">
                    <input formControlName="roleName" nz-input placeholder="角色名称" />
                </nz-input-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <button nz-button nzType="primary">搜索</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-card>
<nz-card [nzSize]="'small'" class="mt-10" class="full-double">
    <div>
        <button nz-button class="mr-10" (click)="addRole(addRoleTitleTpl,roleContentTpl)" *canOperate="'addRoleBtn'"><i
                nz-icon nzType="plus"></i>添加角色</button>
        <button nz-button class="mr-10" (click)="refresh()"><i nz-icon nzType="sync"></i>刷新数据</button>
    </div>
    <div class="mt-10">
        <nz-table #dataTable nzSize="middle" [nzData]="data" nzShowPagination="false" nzFrontPagination="false"
            nzBordered="true">
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="100px">#</th>
                    <th nzAlign="center" nzWidth="230px">名称</th>
                    <th nzAlign="center">备注</th>
                    <th nzAlign="center" nzWidth="120px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of dataTable.data;let i = index;">
                    <td nzAlign="center">{{ i + 1 + (page - 1) * size }}</td>
                    <td nzAlign="center">{{ data.name }}</td>
                    <td nzAlign="center">{{ data.remark }}</td>
                    <td nzAlign="center">
                        <button nz-button nzType="default" nzShape="circle" [disabled]="data.name=='超级管理员'"
                            *canOperate="'updateRoleBtn'" (click)="editRole(editRoleTitleTpl,roleContentTpl,data)"
                            class="mr-10">
                            <i nz-icon nzType="edit"></i>
                        </button>
                        <button nz-button nzType="default" nzShape="circle" (click)="removeRole(data.name)"
                            *canOperate="'deleteRoleBtn'" [disabled]="data.name=='超级管理员'">
                            <i nz-icon nzType="delete"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
    <div class="mt-10">
        <nz-pagination [(nzPageSize)]="size" [(nzPageIndex)]="page" [nzTotal]="total" nzShowSizeChanger
            nzShowQuickJumper (nzPageIndexChange)="pageChange()" (nzPageSizeChange)="sizeChange()"></nz-pagination>
    </div>
</nz-card>

<ng-template #editRoleTitleTpl>
    <span>编辑角色</span>
</ng-template>
<ng-template #addRoleTitleTpl>
    <span>创建新角色</span>
</ng-template>
<ng-template #roleContentTpl>
    <form nz-form [formGroup]="editForm" (ngSubmit)="submitEdit()">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="'edit_roleName'">角色名称</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="roleNameErrorTpl">
                <input [attr.id]="'edit_roleName'" formControlName="roleName" nz-input placeholder="角色名称" autocomplete="off"/>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="'edit_roleRemark'">角色备注</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="备注长度不能超过30！">
                <textarea [attr.id]="'edit_roleRemark'" formControlName="remark" nz-input placeholder="角色备注"
                    rows="2"></textarea>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="'edit_menu'">菜单权限</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <nz-tree-select #menuTree [nzNodes]="nodes" nzCheckable nzPlaceHolder="请选择" formControlName="menus">
                </nz-tree-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <nz-form-control [nzSpan]="14" [nzOffset]="6">
                    <button nz-button nzType="primary" class="mr-10">提交</button>
                    <button nz-button type="button" (click)="cancelEdit()">取消</button>
                </nz-form-control>
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>

<ng-template #roleNameErrorTpl let-control>
    <ng-container *ngIf="control.hasError('required')">
        请输入角色名称！
    </ng-container>
    <ng-container *ngIf="control.hasError('maxlength')">
        角色名长度不能超过15！
    </ng-container>
</ng-template>